<template>
  <div class="page">
    <el-form class="login-form" ref="form" label-width="100" :model="model" :rules="rules">
      <h1>Login</h1>
      <el-form-item label="Username" prop="username">
        <el-input v-model="model.username" />
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input v-model="model.password" />
      </el-form-item>
      <el-form-item label="VerifyCode" class="captcha" prop="VerifyCode">
        <el-input class="captcha__input" v-model="model.VerifyCode" />
        <Captcha />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin">Login</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';
import Captcha from './components/captcha.vue';
export default {
  name: 'login',
  components: {
    Captcha,
  },
  data() {
    return {
      //表单数据
      model: {
        //用户名
        username: "",
        password: "",
        //验证码
        VerifyCode: "",
      },
      rules: {
        //表单规则
        username: [{ required: true, message: '请输入用户名' }],
        password: [{ required: true, message: '请输入密码' }, { min: 6, message: '密码长度不能小于6位' }],
        VerifyCode: [{ required: true, message: '请输入验证码' }]
        //自定义验证规则
        // {
        //   validator: (rule, value, callback) => {
        //     if (value.length !== 4) {
        //       callback(new Error('验证码长度必须为4位'));
        //     } else {
        //       callback();
        //     }
        //   }
        // }]
      },
    }
  },
  methods: {
    async handleLogin() {
      //  //1.获取到表单组件的实例对象
      //  this.$refs.form.validate((flag) => {
      //   //flag用于表示成功还是失败
      //   console.log("flag",flag)
      //   if(flag){
      //     //TODO...
      //   }
      //  })

      // this.$refs.form.validate().then(() => {
      //   console.log("验证成功");
      // }).catch((error) => {
      //   console.log('验证失败')
      // })


      // axios.get('http://127.0.0.1:3000').then((response) => {
      //   console.log(response.data)
      // })

      axios.post('/api/admin/base/open/login', {
        username: '111',
        password: '222',
        captchaId: '333',
        VerifyCode: '1234'
      }).then((response) => {
        console.log(response.data)
      })
    },
  }
}

</script>

<style lang="scss" scoped>
.page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ccc;
}

.login-form {
  padding: 16px;
  box-sizing: border-box;
  width: 360px;
  border-radius: 5px;
  box-shadow: 0 0 10px pink;
  background-color: #fff;
}

h1 {
  text-align: center;
}

.captcha {
  ::v-deep(.el-form-item__content) {
    justify-content: space-between;
  }

  &__input {
    width: 70px;
  }
}
</style>